import React, { Component } from "react";
import Grid from '../../../../components/display/grid';
import OmsSelect from '../../../../components/display/omsSelect';
import EVCSItem from './EVCSItem';
import Invoice from './Invoice';
import Finance from './Finance';
import Configuration from './Configuration';
import {CompanyType,InteractionType,StatusType} from './selectData';
import { Form, Input, Row, Col, Button, message, Divider } from 'antd';
import {appkeyEVCSList,updateStatus} from '../../../../fetch/fetchApi';
// const Option = Select.Option;
const FormItem = Form.Item;
const createForm = Form.create;
// const {TextArea} = Input;

class ConnectionList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible:false,
            visible4Config:false,
            visible4Invoice:false,
            visible4Finance:false,
            hasGetApi:true,
            refresh:0,
            selectInfo:{},
            params:{},
        };
        this.columns = [
            {
                title: 'Appkey',
                dataIndex: 'appkey',
                key: 'appkey',
                width:120,
            },
            {
                title: '产品名称',
                dataIndex: 'productName',
                key: 'productName',
                width:220,
            },
            {
                title: '公司名称',
                dataIndex: 'companyName',
                key: 'companyName',
                width:200,
            },
            {
                title: '企业类型',
                dataIndex: 'companyType',
                key: 'companyType',
                width:80,
                render:(text)=>{
                    if(text=="1"){
                        return '主机厂'
                    }
                    if(text=="2"){
                        return '租赁公司'
                    }
                    if(text=="3"){
                        return '内部使用'
                    }
                    if(text=="4"){
                        return '中小运营商'
                    }
                    if(text=="5"){
                        return '互联互通运营商'
                    }
                    if(text=="6"){
                        return '政府'
                    }
                    if(text=="7"){
                        return '地图厂商'
                    }
                }
            },
            {
                title: '交互方式',
                dataIndex: 'datatype',
                key: 'datatype',
                width:100,
            },
            {
                title: '状态',
                dataIndex: 'status',
                key: 'status',
                width:80,
                render:(text)=>{
                    if(text=="0"){
                        return '禁用'
                    }
                    if(text=="1"){
                        return '启用'
                    }
                }
            },
            {
                title: '操作',
                fixed: 'right',
                width:420,
                render: (text,record) => (
                    <span>
                        <a onClick={()=>{this.changeS(text)}}>{text.status=="0"?'启用':"禁用"}</a>
                        <Divider type="vertical"/>
                        <a onClick={()=>{this.openModal(text)}}>编辑</a>
                        <Divider type="vertical"/>
                        <a onClick={()=>{this.openModal4Config(text)}}>配置信息</a>
                        <Divider type="vertical"/>
                        <a onClick={()=>{this.openModal4Invoice(text)}}>开票配置</a>
                        <Divider type="vertical"/>
                        <a onClick={()=>{this.openModal4Finance(text)}}>金融网关</a>
                        <Divider type="vertical"/>
                        <a onClick={()=>{this.goPage(text)}}>数据配置</a>
                    </span>
                )
            },
        ]
    }

    changeS=(text)=>{
        console.log('text',text);
        updateStatus({appkey:text.appkey,status:text.status=='0'?'1':'0'}).then((response)=>{
            if(response&&response.data&&response.data.code==="200"){
                message.success('更新成功');
                this.setState({
                    refresh:this.state.refresh+1
                })
            }
            if(response&&response.data&&response.data.text){
                message.error(response.data.text);
            }

        })
    }

    goPage=(text)=>{
        console.log('list',text)
        this.props.onAdd.bind(window.LayoutTab)({
            'key': 'dataAuth',
            "titleText": "数据权限"
        }, {
            'keyId': text.appkey,
            'appkey': text.appkey,
        });
    }
    openModal4Config=(data)=>{
        this.setState({
            visible4Config:true,
            selectInfo:data
        },()=>{console.log('selectInfo',this.state)})
    }

    openModal4Invoice=(data)=>{
        this.setState({
            visible4Invoice:true,
            selectInfo:data
        })
    }

    openModal4Finance=(data)=>{
        this.setState({
            visible4Finance:true,
            selectInfo:data
        })
    }

    openModal=(data)=>{
        this.setState({
            visible:true,
            selectInfo:data
        },()=>{console.log('selectInfo',this.state)})
    }

    handleCancel=()=>{
        this.setState({
            visible:false,
            visible4Config:false,
            visible4Invoice:false,
            visible4Finance:false,
            hasGetApi:true
        })
    }
    
    alreadyGet=()=>{
        this.setState({
            hasGetApi: false,
        });
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!!err) {
                return;
            }
            console.log(values);
            this.setState({
                params:Object.assign(this.state.params,values),
                refresh:this.state.refresh+1
            })
            
        });
    };
    freshTable=()=>{
        this.setState({
            refresh:this.state.refresh+1
        })
    }


    render() {
        const {getFieldDecorator} = this.props.form;
        return(
            <div>
                <form form={this.props.form} layout="inline">
                    <Row gutter={4}>
                        <Col xl={4}>
                            <FormItem
                            >
                                {getFieldDecorator('appkey')(
                                    <Input placeholder={'Appkey'}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col xl={4}>
                            <FormItem
                            >
                                {getFieldDecorator('companyName')(
                                    <Input placeholder={'公司名称'}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col xl={3}>
                            <FormItem
                            >
                                {getFieldDecorator('productName')(
                                    <Input placeholder={'产品名称'}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col xl={4}>
                            <FormItem
                            >
                                {getFieldDecorator('companyType')(
                                    <OmsSelect data={CompanyType} placeholder={'企业类型'} />
                                )}
                            </FormItem>
                        </Col>
                        <Col xl={3}>
                            <FormItem
                            >
                                {getFieldDecorator('dataType')(
                                    <OmsSelect data={InteractionType} placeholder={'交互类别'}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col xl={2}>
                            <FormItem
                            >
                                {getFieldDecorator('status')(
                                    <OmsSelect data={StatusType} placeholder={'状态'}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col xl={4}>
                            <FormItem>
                                <Button style={{marginRight:4}} type="primary" htmlType="submit" onClick={this.handleSubmit}>{'搜索'}</Button>
                                <Button type="primary" onClick={this.openModal}>{'新增'}</Button>
                            </FormItem>
                        </Col>
                    </Row>
                </form>
                <Grid className={'sc-table'} columns={this.columns} params={this.state.params} refresh={this.state.refresh} fetchData={appkeyEVCSList} scroll={{ x: 1300}}/>
                <EVCSItem freshTable={this.freshTable} visible={this.state.visible} handleCancel={this.handleCancel} selectInfo={this.state.selectInfo} hasGetApi={this.state.hasGetApi} alreadyGet={this.alreadyGet}/>
                <Configuration visible={this.state.visible4Config} handleCancel={this.handleCancel} selectInfo={this.state.selectInfo} hasGetApi={this.state.hasGetApi} alreadyGet={this.alreadyGet}/>
                <Invoice visible={this.state.visible4Invoice} handleCancel={this.handleCancel} selectInfo={this.state.selectInfo} hasGetApi={this.state.hasGetApi} alreadyGet={this.alreadyGet}/>
                <Finance visible={this.state.visible4Finance} handleCancel={this.handleCancel} selectInfo={this.state.selectInfo} hasGetApi={this.state.hasGetApi} alreadyGet={this.alreadyGet}/>
            </div>
        )
    }
}
ConnectionList = createForm()(ConnectionList);
export default ConnectionList;